import React, { Component } from 'react'
import ReactDom from 'react-dom';
// 某些情况下，我们希望渲染的内容独立于父组件，甚至是独立于当前挂载到的DOM元素中（默认都是挂载到id为root的DOM元素上的）。

// Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案：

// 第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment；
// 第二个参数（container）是一个 DOM 元素；
function Model(props) {
    return (
        <div>
            portal
            {/* 这部分内容会渲染到model元素的后面 */}
            {
                ReactDom.createPortal(
                    props.children,
                    document.getElementById("model")
                )
            }
        </div>
    )
}

export default class App extends Component {
    render() {
        return(
            <div>
                <Model>
                    渲染的组件挂载到自定义的元素后面，
                    一般处理弹窗
                </Model>
            </div>
        )
    }
}